<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Html示例</title>
  <script src="jquery-3.6.1.min.js"></script>
  <style>
    .ok_class {
      background-color: green;
    }

    .fail_class {
      background-color: red;
    }

    .blue {
      color: blue;
    }
  </style>
</head>

<body>
  <p id="p1" class="ok_class">这是一个段落。</p>

  <h1>获取内容和属性</h1>
  <button onclick="alert($('#p1').text())">text</button>
  <button onclick="alert($('#p1').html())">html</button>
  <button onclick="alert($('#p1').val())">val</button>
  <button onclick="alert($('#p1').attr('class'))">attr</button>

  <h1>设置内容和属性</h1>
  <button onclick="$('#p1').text('hello paragraph!')">text</button>
  <button onclick="$('#p1').text('<button>hello paragraph!</button>')">html</button>
  <button onclick="$('#p1').val('hello val!')">val</button>
  <button onclick="$('#p1').attr('class', 'fail_class')">attr</button>

  <h1>添加元素</h1>
  <button onclick="$('#p1').append('Some appended text.')">append</button>
  <button onclick="$('#p1').prepend('Some prepended text.')">prepended</button>
  <button onclick="$('#p1').after('<p>Some after text.</p>')">after</button>
  <button onclick="$('#p1').before('<p>Some before text.</p>')">before</button>

  <h1>删除元素</h1>
  <button onclick="$('#p1').remove()">remove</button>
  <button onclick="$('#p1').empty()">remove</button>

  <h1>CSS类</h1>
  <button onclick="$('#p1').addClass('blue')">addClass</button>
  <button onclick="$('#p1').removeClass('blue')">removeClass</button>
  <button onclick="$('#p1').toggleClass('blue')">toggleClass</button>

</body>

</html>